const el = document.querySelector<HTMLCanvasElement>('#canvas')
el.width = 300
el.height = 150
const app = el.getContext(`2d`)
// 矩形
// app.fillStyle = `gray`
// app.fillRect(0, 0, 300, 300)
// app.fillStyle = `green`
// app.fillRect(el.width / 2 - 50, el.height / 2 - 50, 100, 100)

// 矩形
// app.strokeStyle = `blue`
// app.lineWidth = 30
// app.lineJoin = `round`
// app.strokeRect(50, 50, 100, 100)

// 圆
// app.strokeStyle = `white`
// app.lineWidth = 3
// app.arc(50, 50, 50, 0, 2 * Math.PI)
// app.stroke()

// 三角形
// app.fillStyle = `gray`
// app.fillRect(0, 0, 300, 300)
// app.beginPath()
// app.strokeStyle = 'red'
// app.fillStyle = 'blue'
// app.moveTo(50, 50)
// app.lineTo(100, 100)
// app.lineTo(0, 100)
// app.closePath()
// app.fill()
// app.stroke()

// 渐变色
// const gradient = app.createLinearGradient(0, 0, 300, 300)
// gradient.addColorStop(0, 'blue')
// gradient.addColorStop(0.3, 'red')
// gradient.addColorStop(0.7, 'white')
// gradient.addColorStop(1, 'pink')
//
// app.fillStyle = gradient
// // 填充矩形
// app.fillRect(0, 0, 300, 300)

// 文字
// app.fillStyle = 'gray'
// app.fillRect(0, 0, el.width, el.height)
// app.font = '30px Arial'
// app.fillStyle = 'red'
// app.fillText('HELLO', 100, 100)

// 图片
app.fillStyle = 'gray'
app.fillRect(0, 0, el.width, el.height)
const img = document.createElement('img')
img.src = './1.bmp'
img.onload = () => {
  // 重新设置图片画布大小
  el.width = img.naturalWidth * scale(img, el)
  el.height = img.naturalHeight * scale(img, el)
  // 绘制图片
  app.drawImage(img, 0, 0, el.width, el.height)
}

function scale(img, el) {
  // naturalHeight 图片原始高度
  return Math.min(el.width / img.naturalWidth, el.height / img.naturalHeight)
}


